<template>
    <div class="question-delist">
        <Header style="z-index:1025">
            <header-menu :index="'6-1'"></header-menu>
        </Header>
        <top-search :navlist="NavTitle" :height="15"></top-search>
        <div class="clearfix  container">
            <div class="left">
                 <div class="title clearfix">
                     <img src="../../assets/meirong1.jpg" alt="">
                     <div class="text">
                         <p>现在做完双眼皮一个多月了深宽肉条严重眼球暴露不正常睁眼拉扯感严重要...</p>
                         <p><span>有点奶味</span><span>发表：2018-02-02</span><span>浏览：720</span><span>回复：3</span></p>
                     </div>
                 </div>
                <div class="conten clearfix">
                   <span>问</span>
                    <div class="left-content clearfix">
                        <p>现在做完双眼皮一个多月了深宽肉条严重眼球暴露不正常睁眼拉扯感严重要修复的话难度大吗最后一张是。 （图片仅医生可见）</p>
                        <p><span>眼部</span><span>眼部</span></p>
                        <p><span>赞</span><span>收藏</span><span>投诉帖子</span><span>959</span></p>
                    </div>
                  <p><span>答</span>20条回复</p>
                </div>
                <comment></comment>
            </div>
            <div class="right">
                <div class="qusetion">
                   <p>由于个体差异，想了解适合自身的变美方案，请点击这里进行咨询...</p>
                    <span>我的提问</span>
                </div>
                <side-list :list="sidelist"></side-list>
                <list-posts :postslist="postslist"></list-posts>
            </div>
        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import HeaderMenu from '../../components/Header/'
    import PageFooter from '../../components/Footer/'
    import BottomIcon from '../../components/BottomIcon/'
    import TopSearch from '../../components/TopSearch/'
    import SideList from "../../components/SideMenu/SideList"
    import ListPosts from "@/components/ListItem/ListPosts"
    import Comment from "@/components/Comment/"
    export default {
        name: "delist",
        components:{
            HeaderMenu,
            PageFooter,
            BottomIcon,
            TopSearch,
            SideList,
            ListPosts,
            Comment
        },
        data () {
            return {
                NavTitle:{
                    id:1,
                    name:'整形问答',
                    mytext:'我的提问',
                    type:2
                },
                sidelist: [
                    {
                        id: 1,
                        name: '推荐医生',
                        doctor:1,
                        child: [
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                        ]
                    },
                    {
                        id: 2,
                        name: '竞价排名',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 4,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 3,
                        name: '大家正在预约',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 4,
                        name: '新品推荐',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                ],
                navList: [
                    {id: 2, title: '医生团队',type:2,
                        child:[
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                        ]
                    },
                ],
                postslist: [
                    {
                        id: 1,
                        name: '浏览最多的帖子',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                        ]
                    },
                    {
                        id: 2,
                        name: '回复最多的帖子',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                        ]
                    },
                ],
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../style/style";
    .question-delist{
        >.container{
            border-top: 2px solid @theme-color-dark;
            padding-top: 30px;
            >.left{
               width: 880px;
                float: left;
                .title{
                    border-bottom: 1px solid #e0e0e0;
                    padding-bottom: 20px;
                    img{
                        float: left;
                        width: 90px;
                        height: 90px;
                        border-radius: 50%;
                    }
                    .text{
                        float: left;
                        margin-left: 10px;
                        >:first-child{
                            padding-top: 15px;
                            padding-bottom: 10px;
                            color: #333333;
                            font-size: 20px;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap
                        }
                        p{
                            span{
                                color: #999999;
                                font-size: 14px;
                                margin-right: 15px;
                            }
                        }
                    }
                }
                .conten{
                    padding-left: 70px;
                    margin-top: 20px;
                    padding-bottom: 20px;
                    border-bottom: 1px solid #e0e0e0;
                    >span{
                        float: left;
                        color: white;
                        padding: 0px 4px;
                        font-size: 14px;
                        border-radius: 4px;
                        background-color: @theme-color-dark;
                    }
                    .left-content{
                        float: left;
                        width: 95%;
                        margin-left: 8px;
                        margin-bottom: 35px;
                        p{
                            font-size: 16px;
                            color: #333333;
                        }
                        >:nth-child(2){
                            padding-top: 10px;
                            width: 50%;
                            float: left;
                            span{
                                background-color: #f0f0f0;
                                border-radius: 13px;
                                border: solid 1px #e0e0e0;
                                padding: 3px 10px;
                                font-size: 14px;
                                color: #666666;
                                margin-right: 10px;
                            }
                        }
                        >:last-child{
                            padding-top: 10px;
                            width: 50%;
                            float: right;
                            text-align: right;
                            color: #666666;
                            font-size: 14px;
                            span{
                                margin-right: 15px;
                            }
                            >:nth-child(3){
                                background-color: @theme-color-dark;
                                color: white;
                                padding: 5px 11px;
                                border-radius: 4px;
                                border-bottom: 1px solid #cc4863;
                            }
                            >:last-child{
                                background-color: #eeeeec;
                                border-radius: 4px;
                                border-bottom: 1px solid @theme-color-dark;
                                color: @theme-color-dark;
                                padding: 5px 11px;
                                margin-right: 0px;
                            }
                        }
                    }
                    >p{
                        color: #333333;
                        font-size: 16px;
                        span{
                            font-size: 14px;
                            color: white;
                            background-color: cornflowerblue;
                            padding:3px 4px;
                            border-radius: 5px;
                            margin-right: 10px;
                        }
                    }

                }
            }
            >.right{
                width: 260px;
                float: right;
                .qusetion{
                    padding: 28px 17px;
                    border: solid 1px #e0e0e0;
                    color: #333333;
                    font-size: 14px;
                    text-align: center;
                    p{
                        padding-bottom:20px;
                    }
                    >span{
                        background-color: @theme-color-dark;
                        color: white;
                        padding: 5px 10px;
                        border-radius: 3px;
                        /*margin-top: 5px;*/
                    }
                }
            }
        }
    }

</style>